import useUserInfoStore from "../store/useUserInfoStore";
import {useShallow} from 'zustand/shallow';
import useInsBookStore from "../store/useInsBookStore";

//组件1
const MyApp1 = () => {
    const {name, age, sex, address, phone, setAge, setPhone} = useUserInfoStore();
    return <div>
        <p>姓名: {name}</p>
        <p>年龄: {age}</p>
        <p>性别: {sex}</p>
        <p>地址: {address}</p>
        <p>手机号: {phone}</p>

        <button onClick={() =>{
            setAge(Math.floor(Math.random() * 100));
        }}>修改年龄</button>

        <button onClick={() =>{
            setPhone('18515916047');
        }}>修改手机号</button>

    </div>
}

// 组件2
const MyApp2 = () => {
    console.log('MyApp2 render');
    const {name, sex, phone} = useUserInfoStore(useShallow(state =>({name: state.name, sex: state.sex, phone: state.phone})));

    console.log('data ...',window.localStorage.getItem('myAppleStoreInfo11'));
    return <>
        <div>
            <p>姓名: {name}</p>
            <p>性别: {sex}</p>
            <p>手机号: {phone}</p>
            1111333332331111
        </div>
    </>
}

const MyApp3 = () => {
    const {price,foodName,setPrice} = useInsBookStore(useShallow(state => ({price: state.price, foodName: state.foodName, setPrice:state.setPrice})));
    return <>
            <div>
                <p>价格: {price}</p>
                <p>食物名称: {foodName}</p>
                <button onClick={() =>{
                    setPrice('18515916047');
                }}>修改手机号</button>
            </div>
    </>
}

const MyZustand = () => {
    return <>
        <h1>MyApp1</h1>
        <MyApp1 />
        <hr />

        <h1>MyApp2</h1>
        <MyApp2 />
        <hr />

        <h1>MyApp3</h1>
        <MyApp3 />
    </>
}

export default MyZustand;